<template>
  <div class="login-container">
    <el-card shadow="always" style="background: rgba(255, 255, 255, 0.95)">
      <template #header>
        <h3>欢迎登录</h3>
      </template>
      <template #default>
        <el-form label-width="100px" class="login-form" label-position="left">
          <el-form-item label="用 户 名" prop="username">
            <el-input v-model="username" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="密 码" prop="password" label-position="left">
            <el-input type="password" v-model="password" placeholder="请输入密码" clearable></el-input>
          </el-form-item>
          <!--动态验证码-->
          <el-form-item label="验 证 码" prop="captcha" label-position="left">
            <el-input v-model="captchaText" placeholder="请输入验证码" maxlength="4">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-image :src="captcha.captchaImage" style="width: 120px; height: 30px" @click="refreshCaptcha">
              <template #error>
                <div style="display: flex; justify-content: center; align-items: center; width: 120px; height: 30px; background-color: #f0f0f0">
                  <el-text type="info" size="small">验证码加载失败</el-text>
                </div>
              </template>
            </el-image>
            <el-text type="info" size="small">看不清楚？点击图片刷新</el-text>
          </el-form-item>
          <div style="display: flex; justify-content: center; align-content: center;">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '../stores/auth';
import axios from "axios";
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import type {Captcha} from "@/types";
import {ElMessage} from "element-plus";

const router = useRouter();
const authStore = useAuthStore();

const username = ref("");
const password = ref("");
const captchaText = ref("");
const captcha = reactive<Captcha>({
  captchaId: "",
  captchaImage: ""
});

const refreshCaptcha = () => {
  axios({
    method: "get",
    url: "http://192.168.101.15:18080/captcha"
  }).then(response => {
    captcha.captchaId = response.data.captchaId;
    captcha.captchaImage = "data:image/png;base64," + response.data.captchaImage;
  });
};

onMounted(() => {
  refreshCaptcha();
});

const login = () => {
  axios({
    method: "post",
    url: "http://192.168.101.15:18080/login",
    params: {
      username: username.value,
      password: password.value,
      captchaId: captcha.captchaId,
      captchaText: captchaText.value
    }
  }).then(response => {
    authStore.setJwt(response.data); // 登录成功，保存 jwt
    router.push("/"); // 跳转到首页
  }).catch(e => {
    // 登录失败
    captchaText.value = ""; // 清空验证码
    refreshCaptcha(); // 刷新验证码
    ElMessage({
      type: "error",
      message: e.response.status === 400 ? "验证码错误" : "用户名或密码错误"
    })
  });
};
</script>

<style scoped>
.login-container {
  background-image: url("../assets/image/login-bg.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-form {
  width: 300px;
}
</style>